import { useEffect, useState } from 'react'
import axios from 'axios'
import ListTab from '../component/listTab'
function a() {
  let [count, setCount] = useState([])
  let [flag, setFlag] = useState('lodding')
  let [id1,setId1] = useState(1)
  let [id2,setId2] = useState(1)
  let [id3,setId3] = useState(1)
  let [id4,setId4] = useState(1)
  let [obj,setObj] =useState()
  useEffect(()=>{
    axios.get('/json-server/db.json').then(res=>{
      
      setCount(res.data.coffee)
      setFlag(null)
    })
  },[])
let huo1=(id)=>{
  setId1(id)
}
let huo2=(id)=>{
  setId2(id)
}
let huo3=(id)=>{
  setId3(id)
}
let huo4=(id)=>{
  setId4(id)
}
let buy=()=>{
  let obj={
    id:[id1,id2,id3,id4].join(''),
    name:count.name,
    bei:count.bei.find(v=>v.id==id1).type,
    wen:count.wen.find(v=>v.id==id2).type,
    dou:count.dou.find(v=>v.id==id3).type,
    tang:count.tang.find(v=>v.id==id4).type,
  }
  setObj(obj)
  console.log(obj)
}
  if(flag){
    return flag
  }else {
    return  (
    <div className='apps'>
    <h3>{count.name}</h3>
    <div >精选五常大米，匠制浓醇米乳，为咖啡加入创意米香，恬淡香气溜到鼻尖，这就是米咖范儿
      。米香融入金奖咖啡豆焦香，新鲜口感，陪你在秋日轻盈悦动，喝一口:这范儿很新鲜。</div>
    <p style={{fontSize:'30px',fontWeight:700,marginTop:'50px'}}>杯型</p>
    
    <ListTab cof={count.bei} huo={huo1}></ListTab>
    <p style={{fontSize:'30px',fontWeight:700}}>温度</p>
    <ListTab cof={count.wen} huo={huo2}></ListTab>
    <p style={{fontSize:'30px',fontWeight:700}}>咖啡豆</p>
    <ListTab cof={count.dou} huo={huo3}></ListTab>
    <p style={{fontSize:'30px',fontWeight:700}}>糖度</p>
    <ListTab cof={count.tang} huo={huo4}></ListTab>
    <button onClick={()=>buy()}>购买</button>
    </div>)
  }
  
  
 
}

export default a
